<template>
  <div class="detail-wrapper">
    <a-page-header class="detail-header" title="报修单详情" @back="() => $router.go(-1)">
      <!-- <template #extra>
        <a-space>
          <a-button type="primary" :icon="h(EditOutlined)" @click="handleEdit">
            编辑
          </a-button>
          <a-button :icon="h(PrinterOutlined)" @click="handlePrint">
            打印
          </a-button>
        </a-space>
      </template> -->
    </a-page-header>

    <div class="detail-content">
      <a-spin :spinning="loading">
        <a-row :gutter="24">
          <!-- 基本信息卡片 -->
          <a-col :xs="24" :lg="16">
            <a-card title="基本信息" class="detail-card">
              <div class="detail-info-grid">
                <div class="detail-img-container">
                  <a-image :width="120" :height="120"
                    :src="datas?.customer_equipment?.order_equipment?.equipment?.image || '/images/no-image.png'"
                    fallback=""
                    class="detail-image" />
                </div>
                <div class="detail-info-content">
                  <h2 class="equipment-title">
                    {{ datas?.customer_equipment?.order_equipment?.equipment?.name || datas?.equipment_name || '未知设备' }}
                  </h2>
                  <a-descriptions :column="1" size="small">
                    <a-descriptions-item label="报修单号">
                     {{ datas?.repair_id || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="器材型号">
                      {{ datas?.customer_equipment?.equipment_no || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="器材编码">
                      {{ datas?.customer_equipment?.equipment_no || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="资产编号">
                      {{ datas?.customer_equipment?.asset_no || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="器材分类">
                      {{ datas?.reqpir_category_name || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="报修日期">
                      {{ formatDate(datas?.created) || '-' }}
                    </a-descriptions-item>
                    <a-descriptions-item label="报修状态">
                       {{ datas?.repair_status_name || '-' }}
                    </a-descriptions-item>
                  </a-descriptions>
                </div>
              </div>
            </a-card>
          </a-col>

          <!-- 故障描述卡片 -->
          <a-col :xs="24" :lg="8">
            <a-card title="故障描述" class="detail-card">
              <div class="fault-description">
                {{ datas?.description || '暂无故障描述' }}
              </div>
            </a-card>
          </a-col>
        </a-row>

        <!-- 报修进度卡片 -->
        <a-row :gutter="24" style="margin-top: 24px;">
          <a-col :span="24">
            <a-card title="报修进度" class="detail-card">
              <a-timeline mode="left">
                <a-timeline-item v-for="(item, index) in stepsItems" :key="index"
                  :color="index === 0 ? 'green' : 'blue'">
                  <template #dot>
                    <ClockCircleOutlined v-if="index === 0" style="font-size: 16px;" />
                  </template>
                  <div class="timeline-content">
                    <div class="timeline-time">{{ formatDate(item.title) }}</div>
                    <div class="timeline-desc">{{ item?.description }}</div>
                  </div>
                </a-timeline-item>
                <a-timeline-item v-if="stepsItems.length === 0" color="gray">
                  <div class="timeline-content">
                    <div class="timeline-desc">暂无进度记录</div>
                  </div>
                </a-timeline-item>
              </a-timeline>
            </a-card>
          </a-col>
        </a-row>
      </a-spin>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, h } from "vue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  EditOutlined,
  PrinterOutlined,
  ClockCircleOutlined
} from "@ant-design/icons-vue";
import api from "@/api";

const route = useRoute();
const router = useRouter();
const query = computed(() => route.query);

const loading = ref(false);
const datas = ref();
const stepsItems = ref([]);

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-';
  try {
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch (error) {
    return dateStr;
  }
};

// 获取状态颜色
const getStatusColor = (status) => {
  const statusColors = {
    '待处理': 'orange',
    '处理中': 'blue',
    '已完成': 'green',
    '已取消': 'red',
    '已关闭': 'gray'
  };
  return statusColors[status] || 'default';
};

// 获取基本数据
const getData = async () => {
  try {
    loading.value = true;
    const params = {
      repair_id: query.value.id,
    };
    const res = await api.apiRepairFetchModelPost(params);
    datas.value = res.data;
  } catch (error) {
    console.error('获取数据失败:', error);
    message.error('获取数据失败，请重试');
  } finally {
    loading.value = false;
  }
};

// 获取进度数据
const getStepData = async () => {
  try {
    const params = {
      repair_id: query.value.id,
    };
    const res = await api.apiRepairHistoryPagedListPost({args:params});
    stepsItems.value = res.data.data?.map(item => ({
      title: item.created,
      description: `${item.user_real_name || ''} ${item.title || ''}`
    })) || [];
  } catch (error) {
    console.error('获取进度数据失败:', error);
    message.error('获取进度数据失败');
  }
};

// 编辑处理
const handleEdit = () => {
  message.info('编辑功能开发中...');
};

// 打印处理
const handlePrint = () => {
  window.print();
};

// 初始化数据
onMounted(async () => {
  if (!query.value.id) {
    message.error('缺少报修单ID参数');
    router.go(-1);
    return;
  }

  await Promise.all([
    getData(),
    getStepData()
  ]);
});
</script>

<style lang="less" scoped>
.detail-wrapper {
  background: #f5f5f5;
  min-height: 100vh;

  .detail-header {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 0;
  }

  .detail-content {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.detail-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  :deep(.ant-card-head) {
    border-bottom: 1px solid #f0f0f0;

    .ant-card-head-title {
      font-weight: 600;
      font-size: 16px;
      color: #262626;
    }
  }

  :deep(.ant-card-body) {
    padding: 24px;
  }
}

.detail-info-grid {
  display: flex;
  gap: 20px;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.detail-img-container {
  flex-shrink: 0;

  .detail-image {
    border-radius: 8px;
    border: 1px solid #f0f0f0;
  }
}

.detail-info-content {
  flex: 1;

  .equipment-title {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    line-height: 1.4;
  }

  :deep(.ant-descriptions-item-label) {
    font-weight: 500;
    color: #595959;
    width: 100px;
  }

  :deep(.ant-descriptions-item-content) {
    color: #262626;
  }
}

.fault-description {
  min-height: 120px;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  color: #595959;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.timeline-content {
  .timeline-time {
    font-size: 13px;
    color: #8c8c8c;
    margin-bottom: 4px;
  }

  .timeline-desc {
    font-size: 14px;
    color: #262626;
    line-height: 1.5;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .detail-content {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .detail-content {
    padding: 12px;
  }

  .detail-card {
    :deep(.ant-card-body) {
      padding: 16px;
    }
  }

  .equipment-title {
    font-size: 18px !important;
  }
}

// 打印样式
@media print {
  .detail-header {
    display: none !important;
  }

  .detail-wrapper {
    background: white !important;
  }

  .detail-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
}
</style>